<template>
  <vab-card skeleton>
    <template #header>
      <vab-icon icon="bar-chart-2-line" />
      {{ title }}
      <el-tag class="card-header-tag" type="warning">周</el-tag>
    </template>
    <vab-chart :option="option" />
    <div class="bottom">
      <span>
        {{ tag }}:
        <vab-count
          :decimals="countConfig.decimals"
          :duration="countConfig.duration"
          :end-value="countConfig.endValue"
          :prefix="countConfig.prefix"
          :separator="countConfig.separator"
          :start-value="countConfig.startValue"
          :suffix="countConfig.suffix"
        />
        <!-- <el-tag class="card-footer-tag" type="success">倒计时 {{ n }}s</el-tag> -->
      </span>
    </div>
  </vab-card>
</template>

<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { pull, sample } from 'lodash-es'
import { useSettingsStore } from '/@/store/modules/settings'
import { lightenColor } from '/@/utils/lightenColor'

defineOptions({
  name: 'ObjEcharts',
})
const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  tag: {
    type: String,
    default: '数量',
  },
  tag_value: {
    type: Number,
    default: 0,
  },
  x_data: {
    type: Array,
    default: () => {
      return []
    },
  },
  y_data: {
    type: Array,
    default: () => {
      return []
    },
  },
  y_name: {
    type: String,
    default: '数量',
  },
})

const settingsStore = useSettingsStore()
const { color } = storeToRefs(settingsStore)
let timer: any
const n = ref<number>(5)
const countConfig = reactive<any>({
  startValue: 0,
  endValue: props.tag_value,
  decimals: 0,
  prefix: '',
  suffix: '',
  separator: ',',
  duration: 3000,
})
const option = reactive<any>({
  tooltip: {
    trigger: 'axis',
    extraCssText: 'z-index:1',
  },
  grid: {
    top: '5%',
    left: '2%',
    right: '4%',
    bottom: '0%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: props.x_data,
    axisTick: {
      alignWithLabel: true,
    },
  },

  yAxis: {
    type: 'value',
  },

  series: {
    name: props.y_name,
    type: 'bar',
    barWidth: '60%',
    data: props.y_data,
    itemStyle: {
      borderRadius: [2, 2, 0, 0],
      color: new graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: lightenColor(color.value, 50) },
        { offset: 1, color: color.value },
      ]),
    },
  },
})

watch(
  color,
  () => {
    option.series.itemStyle.color = new graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: lightenColor(color.value, 50) },
      { offset: 1, color: color.value },
    ])
  },
  { immediate: true }
)

onActivated(() => {
  timer = useIntervalFn(() => {
    if (n.value > 0) {
      n.value--
    } else {
      option.series.type = sample(pull(['bar', 'line', 'scatter'], option.series.type))
      n.value = 5
    }
  }, 1000)
})

onDeactivated(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
:deep() {
  .echarts {
    height: 368px !important;
  }
}

.bottom {
  padding-top: 20px;
  margin-top: 5px;
  text-align: left;
  border-top: 1px solid var(--el-border-color);
}
</style>
